<script>
    import Button from "./ui/Button.svelte";
</script>

<div class="app-sides">
    <div class="user">
        <div class="top">
            <div class="like">
                <iconify-icon icon="icon-park-solid:like"></iconify-icon>
                <p class="uuen">14</p>
            </div>
            <div class="avatar">
                <!-- svelte-ignore a11y-missing-attribute -->
                <img class="app-avatar" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.9hA8vMz6W3sKhZWAg_5s0QHaHb?rs=1&pid=ImgDetMain" />
            </div>
        </div>
        <div class="bottom">
            <div class="name">
                <span>王景煊</span>
                <i class="ri-vimeo-fill"></i>
            </div>
            <div class="description">高性能程序定制、UI定制</div>
            <div class="follow">
                <Button>
                    <iconify-icon icon="mingcute:user-pin-fill" class="icon" style="margin-right: 3px;"></iconify-icon>
                    关于博主
                </Button>
            </div>
            <div class="counts">
                <div class="item">
                    <span class="uuen">593811</span>
                    <p>访问</p>
                </div>
                <div class="item">
                    <span class="uuen">3</span>
                    <p>评论</p>
                </div>
                <div class="item">
                    <span class="uuen">20</span>
                    <p>动态</p>
                </div>
                <div class="item">
                    <span class="uuen">2078</span>
                    <p>运行</p>
                </div>
            </div>
            <div class="app-divider">
                <div class="divider-text left">资料</div>
            </div>
            <div class="infos">
                <div class="item">
                    <i class="ri-time-line"></i>
                    <span class="app-time-ago">2 周前</span>
                    <span>来过</span>
                </div>
                <div class="item">
                    <i class="ri-qq-line"></i>
                    <span>设计群: 70888820</span>
                </div>
                <div class="item">
                    <i class="ri-map-pin-line"></i>
                    <span>位置: luzhou·sichuan</span>
                </div>
            </div>
        </div>
    </div>
</div>

<style lang="less">
    .app-sides {
        min-width: 280px;
        position: relative;
        transition: all 0.3s ease-in-out;
        width: 280px;
        .user {
            .top {
                background: url("images/user-top-bg.webp") no-repeat top;
                background-size: 280px auto;
                height: 160px;
                margin-bottom: -1px;
                .like {
                    align-items: center;
                    color: #ff728f;
                    cursor: pointer;
                    display: flex;
                    height: 40px;
                    justify-content: center;
                    margin: 0 auto;
                    width: 96px;
                    gap: 6px;
                }
            }
            .bottom {
                background-color: #fff;
                border-radius: var(--app-radius);
                margin-top: -10px;
                .name {
                    font-size: 14px;
                    margin-top: 4px;
                    text-align: center;
                    width: 100%;
                }
                .description {
                    opacity: 0.9;
                    padding: 10px 0;
                    text-align: center;
                }
                .follow {
                    display: flex;
                    justify-content: center;
                    margin: 6px 0;
                }
                .counts {
                    display: flex;
                    justify-content: space-between;
                    padding: 16px;
                    position: relative;
                    text-align: center;
                    .item {
                        position: relative;
                        span {
                            letter-spacing: 1px;
                        }
                        p {
                            margin-top: 4px;
                            opacity: 0.8;
                        }
                    }
                }
                .app-divider {
                    border-top: 1px solid #f1f1f1;
                    display: block;
                    height: 1px;
                    margin: 20px 0;
                    position: relative;
                    width: 100%;
                }
                .infos {
                    padding: 0 16px 16px;
                    .item {
                        align-items: center;
                        display: flex;
                        opacity: 0.8;
                        .app-time-ago {
                            color: var(--app-theme-a-color);
                            display: inline-block;
                        }
                    }
                }
            }
        }
    }

    .app-avatar {
        border-radius: 50%;
        margin: 22px auto 0;
        display: block;
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
    }
</style>
